<template>
  <div class="console_container">
    <div class="statistics_card" v-for="(statistics,index) in statisticsTitleList" :key="index" style="width: 24%">
      <div class="info">
        <span class="title">{{ statistics.title }}</span>
        <span class="value">{{ statisticsValueList[statistics.key] }}</span>
        <a-space class="compare">
          <span>和昨天相比</span>
          <span :style="{color: statisticsValueList[statistics.key + 'Compare']>=0?'#1da57a':'red'}">
            {{
              statisticsValueList[statistics.key + 'Compare'] > 0 ? '+' + statisticsValueList[statistics.key + 'Compare'] : statisticsValueList[statistics.key + 'Compare'] === 0 ? '- -' : statisticsValueList[statistics.key + 'Compare']
            }}
          </span>
        </a-space>
      </div>
      <div class="icon">
        <component v-bind:is="statistics.icon"/>
      </div>
    </div>
    <div class="feature_card" style="width: 60%">
      <span class="title">登录统计</span>
      <div class="content">
        <div ref="chart" class="chart"></div>
      </div>
    </div>
    <div class="feature_card" style="width: 39%">
      <span class="title">待处理举报</span>
      <div class="content">
        <a-table rowKey="id" :columns="alertColumns" :dataSource="alertList" :pagination="false">
          <template #senderName="{ record }">
            <router-link :to="`/u/${record.senderDomain}`">{{ record.senderName }}</router-link>
          </template>
          <template #userName="{ record }">
            <router-link :to="`/u/${record.userDomain}`">{{ record.userName }}</router-link>
          </template>
          <template #isHandle="{ record }">
            <span v-if="record.isHandle">已处理</span>
            <span v-else>未处理</span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, nextTick, onMounted, reactive, toRefs } from 'vue'
import { DatabaseOutlined, LaptopOutlined, MessageOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Area } from '@antv/g2plot'
import { GetAlertMessagePage } from '@/service/message'
import { GetLoginRateList, GetManageStatisticsData } from '@/service/statistics'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      statisticsTitleList: [{
        key: 'userTotal',
        title: '用户总数',
        icon: 'UserOutlined'
      }, {
        key: 'blogTotal',
        title: '博客总数',
        icon: 'DatabaseOutlined'
      }, {
        key: 'commentTotal',
        title: '评论总数',
        icon: 'MessageOutlined'
      }, {
        key: 'ipTotal',
        title: 'IP总数',
        icon: 'LaptopOutlined'
      }],
      statisticsValueList: [],
      loginRateList: [],
      alertColumns: [{
        title: '举报人',
        dataIndex: 'senderName',
        width: '20%',
        slots: {
          customRender: 'senderName'
        }
      }, {
        title: '被举报人',
        dataIndex: 'userName',
        width: '20%',
        slots: {
          customRender: 'userName'
        }
      }, {
        title: '举报',
        dataIndex: 'content'
      }],
      alertList: []
    })

    onMounted(async () => {
      state.statisticsValueList = await GetManageStatisticsData()
      state.loginRateList = await GetLoginRateList()
      const { list } = await GetAlertMessagePage(false, 1, 5)
      state.alertList = list
      state.alertLoading = false
      await nextTick(() => {
        new Area(proxy.$refs.chart, {
          data: state.loginRateList,
          xField: 'time',
          yField: 'value',
          color: '#1da57a90',
          tooltip: {
            formatter: (data) => {
              return {
                name: '用户登录率',
                value: data.value + '%'
              }
            }
          },
          xAxis: {
            range: [0, 1]
          }
        }).render()
      })
    })

    return {
      ...toRefs(state),
      DatabaseOutlined,
      LaptopOutlined,
      MessageOutlined,
      UserOutlined
    }
  },
  components: {
    DatabaseOutlined,
    LaptopOutlined,
    MessageOutlined,
    UserOutlined
  }
})
</script>

<style lang="less" scoped>
.console_container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  .statistics_card {
    padding: 20px 50px;
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & .info {
      height: 110px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & .title {
        color: #00000090;
        font-size: 20px;
      }

      & .value {
        margin-left: -3px;
        font-size: 40px;
        line-height: 1;
      }

      & .compare {
        color: #00000090;
        font-size: 12px;
      }
    }

    & .icon {
      color: #1da57a90;
      font-size: 100px;
    }
  }

  & .feature_card {
    margin-top: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    & .title {
      padding: 20px 30px;
      color: #00000090;
      font-size: 20px;
      font-weight: 600;
    }

    & .content {
      padding: 0 20px;
      width: 100%;
      height: 500px;

      & .chart {
        padding: 0 0 0 10px;
        height: 480px;
      }
    }
  }

}

</style>
